<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			#div1.box-re,
			#div2.box-re {
				position: inherit;
			}
			
			#div1> div {
				width: 100%;
				height: 60px;
				transition: none;
			}
			
			.jingguo {
				float: left;
				display: inline;
				padding: 20px;
				cursor: pointer;
				background: #efefef;
			}
			
			.chuxian {
				float: left;
				display: inline;
				padding: 20px;
				margin-left: 20px;
				display: none;
				cursor: pointer;
				background: #efefef;
			}
			
			#div1> div {
				width: 100%;
				height: 100px;
				position: relative;
			}
			
			#div1> div span {
				width: 100px;
				height: 100px;
				background: #efefef;
				transition: none;
				line-height: 100px;
				font-size: 32px;
				text-align: center;
				cursor: pointer;
				display: block;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			#div2> div {
				height: 100px;
				position: relative;
				overflow: hidden;
				transition: none;
				background: #c00;
			}
			
			#div2 ul {
				margin: 0;
				padding: 0;
				position: absolute;
				left: 0;
				top: 0;
				transition: none;
				background: green;
			}
			
			#div2 li {
				float: left;
				list-style: none;
				margin: 0 10px 0 0;
				padding: 0;
				width: 100px;
				height: 100px;
				border: 0px double red;
				background: #efefef;
				line-height: 100px;
				font-size: 32px;
				text-align: center;
				cursor: pointer;
			}
		</style>
		<script>
			function getStyle(obj, name) {
				if(obj.currentStyle) {
					return obj.currentStyle[name];
				} else {
					return getComputedStyle(obj, false)[name];
				}
			}
			window.onload = function() {
					var oDiv1 = document.getElementById('div1');
					var aDiv1 = oDiv1.getElementsByTagName('div')[0];
					var aSpn1 = oDiv1.getElementsByTagName('span')[0];
					aSpn1.onclick = function() {
						setInterval(function() {
							aSpn1.style.left = aSpn1.offsetLeft + 2 + 'px';
							aSpn1.innerHTML = 'left=' + aSpn1.style.left;
							aSpn1.style.fontSize = '12px';
							if(parseInt(aSpn1.style.left) >= aDiv1.offsetWidth - aSpn1.offsetWidth) {
								aSpn1.style.left = 0;
							}
						}, 30);
					}

					var oDiv2 = document.getElementById('div2');
					var aDiv2 = oDiv2.getElementsByTagName('div')[0];
					var aBtn2 = oDiv2.getElementsByTagName('button');
					var aUl2 = oDiv2.getElementsByTagName('ul')[0];
					var aLi2 = oDiv2.getElementsByTagName('li');
					var aLi2m = parseInt(getStyle(aLi2[0], 'marginRight'));
					aUl2.innerHTML = aUl2.innerHTML + aUl2.innerHTML;
					aDiv2.style.width = (aLi2m + aLi2[0].offsetWidth) * aLi2.length / 2 + 'px';
					aUl2.style.width = (aLi2m + aLi2[0].offsetWidth) * aLi2.length + 'px';
					var speed = 0;
					var speedN = 2;

					aBtn2[0].onclick = function() {
						speed = -speedN;
					}
					aBtn2[1].onclick = function() {
						speed = speedN;
					}

					function startMove() {
						aUl2.style.left = aUl2.offsetLeft + speed + 'px';
						if(aUl2.offsetLeft < -aUl2.offsetWidth / 2) {
							aUl2.style.left = 0;
						}
						if(aUl2.offsetLeft > 0) {
							aUl2.style.left = -aUl2.offsetWidth / 2 + 'px';
						}
					}
					var time2 = setInterval(startMove, 30);
					aUl2.onmouseover = function() {
						clearInterval(time2);
					}
					aUl2.onmouseout = function() {
						time2 = setInterval(startMove, 30);
					}
				}
				/*
				function getStyle (obj,name)
				{
					if(obj.currentStyle)
					{
						return obj.currentStyle[name];
					}
					else
					{
						return getComputedStyle(obj,false)[name];
					}
				}
				var Speed=2;

				window.onload=function ()
				{
				//1、延时提示框--------------------------------------------------------
					var oDiv1=document.getElementById('div1');
					var aSpn1a=oDiv1.getElementsByTagName('span')[0];
					var aSpn1b=oDiv1.getElementsByTagName('span')[1]; 
					var oTime1=null;
					aSpn1a.onmouseover=function ()
					{
						clearTimeout(oTime1);
						aSpn1b.style.display='inline';
					}
					aSpn1a.onmouseout=function ()
					{
						oTime1=setTimeout(function (){
							aSpn1b.style.display='none';
						}, 500)
					}
					aSpn1b.onmouseover=function ()
					{
						clearTimeout(oTime1);
					}
					aSpn1b.onmouseout=function ()
					{
						oTime1=setTimeout(function (){
							aSpn1b.style.display='none';
						}, 500)
					}
				//2、向右移动---------------------------------------------------------
					var oDiv2=document.getElementById('div2');
					var aDiv2=oDiv2.getElementsByTagName('div')[0];
					var aSpn1=aDiv2.getElementsByTagName('span')[0];
					
					function Show1()
					{
						setInterval(function ()
						{
							if(aSpn1.offsetLeft>aDiv2.offsetWidth-aSpn1.offsetWidth)
							{
								aSpn1.style.left=0;
							}
							aSpn1.style.left=aSpn1.offsetLeft+Speed+'px';
						}, 30)
					}
					Show1()
				//3、无缝滚动---------------------------------------------------------
					var oDiv3=document.getElementById('div3');
					var aDiv3=oDiv3.getElementsByTagName('div')[0];
					var oUl3=aDiv3.getElementsByTagName('ul')[0];
					var oLi3=oUl3.getElementsByTagName('li');
					var oLi3M=parseInt(getStyle (oLi3[0],'marginRight'));
					var oTime2=null;
						oUl3.innerHTML=oUl3.innerHTML+oUl3.innerHTML;
						oUl3.style.width=(oLi3M+oLi3[0].offsetWidth)*oLi3.length+'px';
						aDiv3.style.width=oUl3.offsetWidth/2+'px';
						oUl3.style.left=-oUl3.offsetWidth/2+'px';
					function Show2 ()
					{
						var arr3=['圣','诞','快','乐','!','圣','诞','快','乐','!'];
						oTime2=setInterval(function ()
						{
							if(oUl3.style.left>oUl3.style.width)
							{
								oUl3.style.left=-oUl3.offsetWidth/2+'px';
							}
							oUl3.style.left=oUl3.offsetLeft+Speed+'px';
						}, 30)
						for(var i=0;i<oLi3.length;i++)
						{
							oLi3[i].index=i;
							oLi3[i].onmouseover=function ()
							{
								this.innerHTML=arr3[this.index]
							}
						}
					}
					Show2 ();
					aDiv3.onmouseover=function ()
					{
						clearInterval(oTime2);
					}
					aDiv3.onmouseout=function ()
					{
						Show2 ();
					}
				}
				*/
		</script>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			1、向右移动<br><br>
			<div><span>飘</span></div>
		</div>

		<div id="div2" class="box box-re form-inline">
			2、无缝滚动<br><br>
			<button class="btn btn-info">向左滚动</button> <button class="btn btn-info">向右滚动</button>
			<br><br>
			<div>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>向右移动：</b><code>offsetLeft</code> 例如可以通过<code>onclick="alert(this.offsetLeft)"</code> 查看left的值（左边距）。让物体向右动起来，其实就是自动修改绝对定位的left。通过定时器，让aSpn1的left每30毫秒自动加10像素，并还给他自己。<code>aSpn1.style.left=aSpn1.offsetLeft+Speed+'px';</code></p>
			<p><b>无缝滚动：</b>开定时器，让ul的left自动增加。但是当ul一走，ul后边div的背景就漏出来了。所以可以通过复制一份ul的innerHTML<code>ul.innerHTML=ul.innerHTML+ul.innerHTML</code> 然后需要修改ul的宽度，他得宽度等于<code>li.length*li.offsetWidth+'px'</code> 但是这个ul也有滚完的时候，所以可以让ul滚动到一半的时候<code>if(ul.style.left>=ul的宽度/2)</code>，把left的值改为初始化<code>ul.style.left=0</code>。
			</p>
		</div>

	</BODY>

</HTML>